package com.huluobo.a2301mdmdemo.demo

import androidx.compose.foundation.ExperimentalFoundationApi
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountCircle
import androidx.compose.material.icons.filled.Lock
import androidx.compose.material3.ExperimentalMaterial3Api
import androidx.compose.material3.Icon
import androidx.compose.material3.OutlinedTextField
import androidx.compose.material3.Text
import androidx.compose.material3.TextField
import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.input.PasswordVisualTransformation
import androidx.compose.ui.text.input.VisualTransformation
import androidx.compose.ui.unit.dp

/**
 *  Created by LC on 2025/6/20.
 */

@OptIn(ExperimentalMaterial3Api::class, ExperimentalFoundationApi::class)
@Composable
fun MyEdit() {

    var name by remember {
        mutableStateOf("")
    }

    var password by remember {
        mutableStateOf("")
    }

    var isShowPassword by remember {
        mutableStateOf(false)
    }
    Column(Modifier.padding(10.dp), verticalArrangement = Arrangement.spacedBy(10.dp)) {
        //观察者模式的输入框,会根据值的变化来赋值
        TextField(
            value = name,
            onValueChange = {
                //onValueChange当输入框中的值发生改变时
                //it  是当前输入框中的值
                name = it
            },
            //标签
            label = {
                Text(text = "请输入用户名")
            },
            modifier = Modifier.fillMaxWidth(),
            leadingIcon = {
                //输入框左侧的图标
                Icon(imageVector = Icons.Default.AccountCircle, contentDescription = "")
            },
            trailingIcon = {
                Icon(imageVector = Icons.Default.Lock, contentDescription = "")
            }
        )

        TextField(value = password, onValueChange = { password = it },
            label = {
                Text(text = "请输入密码")
            }, modifier = Modifier.fillMaxWidth(), leadingIcon = {
                Icon(imageVector = Icons.Default.AccountCircle, contentDescription = "")
            }, trailingIcon = {
                Icon(imageVector = Icons.Default.Lock, contentDescription = "", modifier = Modifier.clickable {
                    isShowPassword = !isShowPassword
                })
                //密文
                //通过一个带状态的变量来改变是否密文显示密码
            }, visualTransformation = if (isShowPassword) VisualTransformation.None else PasswordVisualTransformation()
        )

        OutlinedTextField(value = name, onValueChange = { name = it }, label = {
            Text(text = "请输入账号")
        })
    }
}